<extend name="common/base" />
<block name="common_resource">
</block>
<block name="accountJS">
</block>
<block name="resource">
    <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/lib/swiper.jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/css/swiper.min.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/css/downLoad.css"/>
</block>

<block name="body">
<div class="header">
    <div class="header-content">
        <div class="logo">
            <a href="/">
                <img src="__PUBLIC__/Home/ui3/images/Logo1.png" alt=""/>
            </a>
        </div>
        <div class="nav">
            <ul>
                <li class="bar-one"><a href="{:C('LOCAL_DOMAIN')}/download">下载</a></li>
                <li class="bar-two"><a href="javascript:;">教程</a></li>
                <li class="bar-three"><a href="/faq">FAQ</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide-one swiper-no-swiping">
            <div class="slide-box">
                <div class="img1">
                    <img src="__PUBLIC__/Home/ui3/images/downloadimg.png" alt=""/>
                </div>
                <div class="img2">
                    <img src="__PUBLIC__/Home/ui3/images/img2.png" alt=""/>
                </div>
                <div class="slide-tips">
                    <div class="tips-head">66Play录制工具</div>
                    <div class="tips-head1">轻量录制 · 一键编辑 · 保存游戏足迹</div>
                    <div class="tips-content">66Play最轻量录制工具，炫酷操作，一键记录，打造专属于你的游戏藏宝室，轻松分享精彩瞬间，暴走五杀不再是截图！
                    </div>
                    <div class="tips-btn">
                        <div class="btn-img">
                            <a href="/download-pc" class="load-tool">

                            </a>
                            <a href="javascript:;" class="load-app" onclick="erweimaShow()">

                            </a>
                        </div>
                        <div class="btn-info">版本号：V {$versionInfo.outer_version} ( {$versionInfo.create_time|date='Y-m-d',###}更新 )</div>
                    </div>
                    <div class="tips-learn">
                        <a href="javascript:;">去学习如何使用 ></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slide-two swiper-no-swiping">
            <div class="slide-box">
                <div class="img3">
                    <img src="__PUBLIC__/Home/ui3/images/img1.png" alt=""/>
                </div>
                <div class="slide-tips2">
                    <div class="tips-content act act1">欢迎来到66Play使用教程</div>
                    <div class="tips-head fenge act act2">第一步·录制视频</div>
                    <div class="tips-content fenge act act4">1.点击开始录制按钮</div>
                    <div class="tips-content act act5">此时66Play已经开始运行，你可以选择将其最小化然后开始游戏。</div>
                    <div class="tips-content act act6">在66Play运行的过程中，只需点击捕捉热键就可以即时录制点击热键前一分钟的炫酷操作。</div>
                    <div class="tips-content act act7"> 66Play将生成一个文件夹用以存放你录制的视频，文件夹会以时间顺序排序。</div>
                    <div class="tips-learn fenge act act9">
                        <a href="javascript:;">继续学习如何使用 ></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slide-three swiper-no-swiping">
            <div class="slide-box">
                <div class="img3">
                    <img src="__PUBLIC__/Home/ui3/images/img4.png" alt=""/>
                </div>
                <div class="slide-tips2">
                    <div class="tips-content action action1">欢迎来到66Play使用教程</div>
                    <div class="tips-head fenge action action2">第二步·编辑上传</div>
                    <div class="tips-content fenge action action4">1.进入编辑页并找到你的视频</div>
                    <div class="tips-content action action5">
                        点击视频进入编辑界面，你可以在其中裁剪视频的长度，并为视频添加标题、描述等信息。编辑完成后可以点击预览视频进行预览。
                    </div>
                    <div class="tips-content fenge action action6">2.点击上传视频</div>
                    <div class="tips-content action action7">
                        66Play将会为你生成精彩短视频，你可以在分享页将其分享给你的小伙伴们，与小伙伴一同感受游戏中的喜怒哀乐大家一起666！
                    </div>
                    <div class="tips-learn fenge action action8">
                        <a href="javascript:;">再学习一次 ></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<div class="erweima-box">
    <div class="erweima">
        <div class="cancel-icon" onclick="erweimaHide();" ></div>
        <img src="__PUBLIC__/Home/ui3/images/erweima.png" alt=""/>
    </div>
</div>

<div class="footer">
    <p>©2013 All Rights Reserved.版权所有.成都映霸龙渊文化传播有限公司 蜀ICP备16004268号</p>
    <p>公司地址：成都市高新区益州大道中段722号复城国际T1栋12楼</p>
</div>
<div class="shadow shadow1">

</div>
<div class="sd1">点击开始按钮</div>
<div class="sd2"></div>
<div class="shadow shadow2">
</div>
<div class="sd3">步骤二，点击关闭结束录制</div>
<div class="sd4"></div>
<div class="shadow shadow3">

</div>
<div class="sd5">1.点击要编辑的视频</div>
<div class="sd6"></div>
<div class="shadow shadow4">

</div>
<div class="sd7"></div>
<div class="sd8"></div>
<div class="shadow shadow5">

</div>
<div class="sd9">2.点击上传按钮</div>
<div class="sd0"></div>
<div class="shadow shadow6">

</div>
<div class="sd11"></div>

<div class="sd12">点这里继续学习</div>
<div class="sd13"></div>
<script type="text/javascript">
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

    var t;
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        onSlideChangeStart: function (swiper) {
            if (swiper.activeIndex == 0) {
                one();
            } else if (swiper.activeIndex == 1) {
                two();
            } else if (swiper.activeIndex == 2) {
                three();
            }
        }
    });
    one();
    function one() {
        del();
        $(".bar-one").addClass("active");
        $(".slide-one .slide-tips").addClass("animation1");
        $(".slide-one .img1").addClass("animation11");
        $(".slide-one .img2").addClass("animation12");
    }
    function two() {
        del();
        $(".bar-two").addClass("active");
        timeout($(".act1"), 50);
        timeout($(".act2"), 150);
        timeout($(".act4"), 250);
        $(".img3").addClass("animation21");
        t = setTimeout(function () {
            $(".shadow1").show();
            $(".sd1").show();
            $(".sd2").show();
        }, 2000);
    }
    $(".sd2").click(function () {
        $(".shadow1").hide();
        $(".sd1").hide();
        $(".sd2").hide();
        timeout($(".act5"), 50);
        timeout($(".act6"), 750);
        timeout($(".act7"), 1450);
        timeout($(".act9"), 4150);
        $(".slide-two .img3 img").attr("src", "__PUBLIC__/Home/ui3/images/img3.png");
        $(".shadow6").show();
        $(".sd11").show().addClass("animation31");
        t = setTimeout(function () {
            $(".shadow6").hide();
            $(".sd11").hide();
            $(".shadow1").show();
            $(".sd12").show();
            $(".sd13").show();
        }, 6000)
    });
    $(".sd13").click(function(){
        $(".shadow1").hide();
        $(".sd12").hide();
        $(".sd13").hide();
        swiper.slideTo(2, 200, function () {
            three();
        })
    });

    $(".slide-two .tips-learn").click(function () {
        swiper.slideTo(2, 200, function () {
            three();
        })
    });


    function three() {
        del();
        $(".bar-two").addClass("active");
        timeout($(".action1"), 50);
        timeout($(".action2"), 150);
        timeout($(".action4"), 250);
        $(".img3").addClass("animation21");
        t = setTimeout(function () {
            $(".shadow3").show();
            $(".sd5").show();
            $(".sd6").show();
        }, 2000);
    }
    $(".sd6").click(function () {
        $(".shadow3").hide();
        $(".sd5").hide();
        $(".sd6").hide();
        timeout($(".action5"), 50);
        $(".slide-three .img3 img").attr("src", "__PUBLIC__/Home/ui3/images/img5.png");
        $(".shadow4").show();
        $(".sd7").show().addClass("animation3");
        $(".sd8").show().addClass("animation4");
        timeout($(".action6"), 4500);
        t = setTimeout(function () {
            $(".shadow4").hide();
            $(".sd7").hide();
            $(".sd8").hide();
            $(".shadow5").show();
            $(".sd9").show();
            $(".sd0").show();
        }, 5500);
    });
    $(".sd0").click(function () {
        $(".shadow5").hide();
        $(".sd9").hide();
        $(".sd0").hide();
        timeout($(".action7"), 50);
        timeout($(".action8"), 1050);
    });
    $(".slide-three .tips-learn").click(function () {
        swiper.slideTo(1, 200, function () {
            two();
        })
    });
    function del() {
        clearTimeout(t);
        $(".nav li").removeClass("active");
        $(".slide-one .slide-tips").removeClass("animation1");
        $(".slide-one .img1").removeClass("animation11");
        $(".slide-one .img2").removeClass("animation12");
        $(".img3").removeClass("animation21");
        $(".act").removeClass("animation2");
        $(".slide-two .img3 img").attr("src", "__PUBLIC__/Home/ui3/images/img1.png");
        $(".action").removeClass("animation2");
        $(".slide-three .img3 img").attr("src", "__PUBLIC__/Home/ui3/images/img4.png");
    }
    // $(".bar-one").click(function () {
    //     swiper.slideTo(0, 200, function () {
    //         one();
    //     })
    // });
    $(".bar-two").click(function () {
        swiper.slideTo(1, 200, function () {
            two();
        })
    });
    $(".slide-one .tips-learn").click(function () {
        swiper.slideTo(1, 200, function () {
            two();
        })
    });
    function timeout(m, n) {
        t = setTimeout(function () {
            m.addClass("animation2")
        }, n)
    }

    function erweimaShow(){
        $(".erweima-box").fadeIn();
    }
    function erweimaHide(){
        $(".erweima-box").fadeOut();
    }

    <if condition="$type eq 'tutorial'">
        swiper.slideTo(1, 200, function () {
            two();
        })
    </if>
</script>
</block>